<template>
  <uni-nav-bar title="车队成员" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package space-between" v-for="item in getFleetList" :key="item.id">
    <view class="center">
      <image :src="item.driver_avatar" mode=""></image>
      <view>{{item.driver_name}}</view>
    </view>
    <view @click="telCall(item.driver_mobile)">{{item.driver_mobile}}</view>
  </view>
</template>

<script setup lang="ts">
  import { telCall } from '@/utils/copyText';
  import { navBack } from '@/utils/navigator';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getFleetDriverList } from '@/gql/fleet';
  import { ref } from 'vue';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  /**
   * 车队成员列表
   * @param {Array} getFleetList 车队成员列表
   */
  const getFleetList = ref([])
  init()
  function init() {
    showLoading()
    const payload = {
      query: getFleetDriverList,
      variables: {
        fleet_id: Number(userInfo.getFleetAll.id)
      },
    };
    toPublish('ql/driver/getFleetDriverList', payload, (obj : any) => {
      const { getFleetDriverList } = obj.data;
      getFleetList.value = getFleetDriverList
    });
  }
</script>

<style scoped lang="less">
  .center {
    image {
      width: 80rpx;
      height: 80rpx;
      background: #DDDDDD;
      border-radius: 5px;
      margin-right: 20rpx;
    }
  }
</style>